@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="ibox-title">
            <h5>搭配师列表</h5>
        </div>
        <div class="ibox-content">
             <div class="table-responsive">
                <form role="form" class="form-inline">
                    <div class="form-group">
                        <input name="name" type="text" placeholder="名称"  class="form-control">
                    </div>
                    <button class="btn btn-white" type="button" id="buttonData">搜索</button>
                </form>
                <div class="hr-line-dashed"></div>
                <div class="m-b">
                    <a href="javascript:;" id="btnAddTag" class="btn btn-warning"><i class="fa fa-plus"></i> 添加搭配师</a>
                </div>
                <table id="tblDataList" class="table table-striped">
                    <thead>
                        <tr>
                            <th width="50" class="text-center">#</th>
                            <th>姓名</th>
                            <th>介绍</th>
                            <th>级别</th>
                            <th>照片</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($rows as $k=>$row)
                        <tr data-id="{{$row->id}}"  >
                            <td class="text-center">
                                {{$k+1}}
                            </td>
                            <td>{{$row->name}}</td>
                            <td>{{$row->introduce}}</td>
                            <td>{{$row->level}}</td>
                            <td>
                                <a href="{{asset($row->photo)}}" target="__blank">{{$row->photo}}</a>
                            </td>
                            <td>
                                <a href="javascript:;" class="m-r-xs js-del">
                                    <i class="fa fa-trash fa-lg"></i> 删除
                                </a>
                                <a href="javascript:;" class="m-r-xs js-edit">
                                    <i class="fa fa-edit fa-lg"></i> 编辑
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="text-center"><?php echo $rows->render(); ?></div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tplAddStylist">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form class="form-horizontal" id="btn-form-add" enctype="multipart/form-data" onsubmit="return false">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">×</button>
                        <h4 class="modal-title">添加搭配师</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">姓名：</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="name" required="">
                                    <!-- <p class="form-control-static">@{{nickname}}</p> -->
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">级别：</label>
                                <div class="col-sm-9">
                                    <select class="form-control m-b" name="level" required>
                                        <option value="">---请选择搭配师级别---</option>
                                        <option value="初级服装搭配师">初级服装搭配师</option>
                                        <option value="中级服装搭配师">中级服装搭配师</option>
                                        <option value="高级服装搭配师" >高级服装搭配师</option>
                                        <option value="资深服装搭配师">资深服装搭配师</option>
                                       
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">介绍：</label>
                                <div class="col-sm-9">
                                    <textarea class="form-control" name="introduce" required></textarea>
                                </div>
                            </div>
                            <div class="form-group item-pic">
                                <label class="col-sm-2 control-label">上传照片：</label>
                                <div class="col-sm-9">
                                    <img src="/assets/images/upload-img.jpg" width="180px">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div>
        </div>
</script>

<script type="text/html" id="tplAddStyEdit">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form class="form-horizontal" id="btn-edit" enctype="multipart/form-data" onsubmit="return false">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">×</button>
                    <h4 class="modal-title">添加搭配师</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">姓名：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="name" value="@{{data.name}}" required="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">级别：</label>
                            <div class="col-sm-9">
                                <select class="form-control m-b" name="level" required>
                                    <option value="" >---请选择搭配师级别---</option>
                                    <option value="初级服装搭配师" @{{if data.level=='初级服装搭配师'}}selected @{{/if}}>初级服装搭配师</option>
                                    <option value="中级服装搭配师" @{{if data.level=='中级服装搭配师'}}selected @{{/if}}>中级服装搭配师</option>
                                    <option value="高级服装搭配师" @{{if data.level=='高级服装搭配师'}}selected @{{/if}}>高级服装搭配师</option>
                                    <option value="资深服装搭配师" @{{if(data.level=='资深服装搭配师')}}selected @{{/if}} >资深服装搭配师</option>
                                    
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">介绍：</label>
                            <div class="col-sm-9">
                                <textarea class="form-control" name="introduce" required>@{{data.introduce}}</textarea>
                            </div>
                        </div>
                        <div class="form-group item-pic">
                            <label class="col-sm-2 control-label">上传照片：</label>
                            <div class="col-sm-9">
                                <img src="@{{if data.photo==''}}/assets/images/upload-img.jpg @{{else}}/@{{data.photo}} @{{/if}}" width="180px" @{{if data.photo!=''}}url="@{{data.photo}}" @{{/if}}>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" class="form-control" value="@{{data.id}}" name="id" >
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">提交</button>
                </div>
            </form>
        </div>
    </div>
</script>
<input type="file" style="display: none" id="uploadfile">
@endsection

@section('pageheader')
    <link rel="stylesheet" href="/assets/datetimepicker/css/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="/assets/fileinput/css/fileinput.css" />
@endsection
@section('pagescript')

<script src="/assets/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script>
    $("#side-menu li[rel='stylist']").addClass("active");
    var filter = {page:1,status:0};
    $(function () {



        $('body').on('click','#btnAddTag',function(){
            $("#modalDialog").html(template("tplAddStylist")).modal("show");
            $('.item-pic img').click(function () {
                $("input[type='file']").click();
            });
        });



        $("#modalDialog").on('submit','#btn-form-add',function(e){
            var formData = $('#btn-form-add').serializeArray();
            var src = $("#modalDialog .item-pic img").attr('url');
            if (typeof(src)==="undefined") {
                layer.msg('请上传图片', {icon: 0});
                return false;
            }
            photo = $('#modalDialog .item-pic img').attr('url');
            formData.push({"name":'photo',"value":photo});     
            $.ajax({
                url:"/admin/stylist/create",
                type:"post",
                data:formData,
                success:function(data){
                    layer.msg('添加成功');
                    $("#modalDialog").html('').modal("hide");
                    window.location.reload();
                },
                error:function(data){
                      var str = typeof(data) == 'string' ? data : data.responseJSON;
                      layer.msg(str, {icon:0});
                      return false;
                }
            });   
        });

        


        $('#tblDataList').on('click','.js-del',function(){
            var that = $(this).parents('tr').eq(0);
            var id = that.attr('data-id');
            layer.confirm('您确定删除这条记录？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                $.post('/admin/stylist/del',{'id':id},function(data){
                    layer.msg('删除成功');
                    that.remove();
                }).fail(failure);
            }, function(){
                layer.closeAll();
            });
        })

        $('#tblDataList').on('click','.js-edit',function(){
            var that = $(this).parents('tr').eq(0);
            var id = that.attr('data-id');
            $.get('/admin/stylist/info',{'id':id},function(data){
                console.log(data);
                $("#modalDialog").html(template("tplAddStyEdit",{'data':data})).modal("show");
                $('.item-pic img').click(function () {
                    $("input[type='file']").click();
                });


            }).fail(failure);
        })

        $("#modalDialog").on('submit','#btn-edit',function(e){
            var formData = $('#btn-edit').serializeArray();
            var src = $("#modalDialog .item-pic img").attr('url');
            if (typeof(src)==="undefined") {
                layer.msg('请上传图片', {icon: 0});
                return false;
            }
            photo = $('#modalDialog .item-pic img').attr('url');
            formData.push({"name":'photo',"value":photo});      
            $.ajax({
                url:"/admin/stylist/edit",
                type:"post",
                data:formData,
                success:function(data){
                    layer.msg('编辑成功');
                    // window.location.reload();
                },
                error:function(data){
                      var str = typeof(data) == 'string' ? data : data.responseJSON;
                      layer.msg(str, {icon:0});
                      return false;
                }
            });   
        });
        
        $("input[type='file']").change(function () {
            let files=$(this)[0].files[0];//获取files对象

            var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
            if (!rFilter.test(files.type)) {
                msg('格式错误');
                return;
            }
            layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
            var formData = new FormData();
            formData.append("file",files);
            $.ajax({
                url: "/admin/upload-img",
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    $('#modalDialog .item-pic img').attr('src','/'+data).attr('url',data);
                    layer.closeAll();
                },
                error: function (data) {
                    layer.closeAll();
                    var str = typeof(data) == 'string' ? data : data.responseJSON;
                    layer.msg(str, {icon: 0});
                    return false;
                }
            });
        });
    })

</script>
@endsection